<!--
* 功能-页面实现
* Date: 2023-8-7
* Author: 靳从毅,王泽同
 -->
 <template>
  <div style="height: 88vh;">
    <div style="position: relative;">
      <el-input class="search" v-model="searchCondition" placeholder="搜索资源编号进行定位" />
      <el-button class="searchicon" type="primary" icon="el-icon-search"></el-button>
      <transition-group name="hello">
        <div v-show="visible" class="drawer" key="1">
          <div class="title">
            <span>标注记录</span>
            <el-button type="primary" class="newArea" @click="showAreaDialog">新增</el-button>
          </div>
          <table-scroll stripe :columns="terminalColumns" style="margin: 10px ;width: 380px" :loading="loading"
            :disabled="disabled" :table-data="thresholdData1" height="300" :pagination="pager" class="scroll-table"
            @scroll="scroll" @current-change="changeCurrent" @size-change="changePageSize" @click="gatePosition">
            <template #action="{ row }">
              <!-- 自定义操作栏示例  -->
              <el-button class="link-btn" @click="handleEdit(row, item)" link type="primary">编辑</el-button>
              <!-- 自定义操作栏示例  -->
              <el-popconfirm title="是否删除?" confirmButtonText="确定" cancelButtonText="取消"
                @confirm="() => handleDelete(row)">
                <template #reference>
                  <el-button class="link-btn" link type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>

          </table-scroll>


          <div class="title">
            <span>旅客态势</span>
          </div>
          <el-row :gutter="16">
            <el-col :span="10" style="margin-bottom: 30px">
              <div style="
                width: 105px;
                height: 80px;
                margin-left: 20px;
                padding-left: 20px;
              ">
                <div style="display: inline-flex; align-items: center">
                  <div style="margin-right: 40px; margin-bottom: 5px;">
                    进港
                  </div>
                  <el-icon style="
                    margin-right: 4px;
                    margin-bottom: 4px;
                    margin-top: 10px;
                  " :size="30">
                    <Warning />
                  </el-icon>
                </div>
                <div class="statistic-footer" style="margin-top: 0">
                  <div class="footer-item">
                    <span style="font-size: 20px">{{ arrivalsNumber }}</span><span>人次</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-divider direction="vertical" style="height: 100px"></el-divider>
            <el-col :span="10">
              <div style="
                width: 105px;
                height: 70px;
                padding-left: 20px;
              ">
                <div style="display: inline-flex; align-items: center">
                  <div style="margin-right: 40px; margin-bottom: 5px">出港</div>
                  <el-icon style="
                    margin-right: 4px;
                    margin-bottom: 4px;
                    margin-top: 10px;
                  " :size="30">
                    <Warning />
                  </el-icon>
                </div>
                <div class="statistic-footer" style="margin-top: 0">
                  <div class="footer-item">
                    <span style="font-size: 20px">{{ departuresNumber }}</span><span>人次</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>

          <div class="title">
            <span>航班保障数据</span>
          </div>
          <div style="position: relative;">
            <Ring ref="ring" myId="main1" :eventData="eventData" :sumTotal="sumTotal" :subTital="subTital"
              :pieColors="pieColors" layout="Vertical" class="pieStyle" />
          </div>
        </div>
        
      </transition-group>

      <Bar barTitle="航班资源数据" ref="bar" myId="main2" :barData="barData" :barAttr="barAttr" :barXData="barXData" :barColor="barColor"
             class="barStyle" />
        <el-radio-group v-model="layer" class="btn_d btnLayer">
          <el-radio-button v-for="area in areaDetail" :key="area.buildName" :label="area.buildName"
                           @change="showFloor(area.floorDesc)">
            {{ area.buildName }}
          </el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="subLayer" v-if="hasSub" class="'btn_c subLayer">
          <el-radio-button v-for="area in subLayers" :key="area.buildName" :label="area.buildName"
                           @change="switchMap(area.name)">
            {{ area.buildName }}
          </el-radio-button>
        </el-radio-group>

      <transition-group name="right">
        <div :class="visibleRight == true
          ? 'mapLegend_a mapLegend'
          : 'mapLegend_b mapLegend'
          ">
          <span>图层控制</span>
          <div>
            <div class="legend" style="background: #FACD91;margin-top: 10px;margin-right: 5px;" />
            手推车
            <el-switch v-model="HandCart" class="sw" size="small" @click="switchArea" v-if="!visibleRight" style="
    float: right;
" />
          </div>
          <div>
            <div class="legend" style="background: #FFFF80;margin-top: 10px;margin-right: 5px;" />
            安检通道
            <el-switch v-model="SecurityLane" class="sw" size="small" @click="switchArea" v-if="!visibleRight" style="
    float: right;
" />
          </div>
          <div>
            <div class="legend" style="background: #EC808D;margin-top: 10px;margin-right: 5px;" />
            登机口
            <el-switch v-model="BoardingGate" class="sw" size="small" @click="switchArea" v-if="!visibleRight" style="
    float: right;
" />
          </div>
          <div>
            <div class="legend" style="background: #CAF982;margin-top: 10px;margin-right: 5px;" />
            行李转盘
            <el-switch v-model="BaggageCarousel" class="sw" size="small" @click="switchArea" v-if="!visibleRight" style="
    float: right;
" />
          </div>
          <div>
            <div class="legend" style="background: #81D3F8;margin-top: 10px;margin-right: 5px;" />
            机位
            <el-switch v-model="FlightValue" class="sw" size="small" @click="switchArea" v-if="!visibleRight" style="
    float: right;
" />
          </div>
        </div>
      </transition-group>
    </div>
    <map-control @mapLoad="mapLoadEvent" />
    <edit-dialog class="dialog" :centerDialogVisible="showAreaDialogVisible" :tilte="title" :key="timer"
      :defaultButton="false" :closeOnClickModal="false" :myModal="false" :width="360" @Cancel="Cancel">
      <template #content>
        <!-- 直接调用FilterBar组件，不再使用layoutcard组件 -->
        <FilterBar ref="FilterRef" :close-collapse="true" :filters="terminalOptions" :hasButton="false" :rules="rules"
          :hasTableButton="hasTableButton" @search-change="onSearch" @search-reset="onReset"
          @on-toggle="(val: any) => $emit('on-toggle', val)" />
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button @click="Cancel">返回</el-button>
          <el-button type="primary" @click="Submit">保存</el-button>
        </span>
      </template>
    </edit-dialog>
  </div>
</template>

<script lang="ts" setup>
import FilterBar from '@/components/FilterBar/index.vue'
import editDialog from '@/components/editDialog/index.vue'
import {
  terminalPageList, PageListType, terminalDelete, terminalUpdate, selectarrival, selectdeparture
  , selectFlight, FlightResources, terminalAdd
} from '@/api/monitor/terminal'
import TableCommon from '@/components/TableCommon/index.vue'
import TableScroll from '@/components/TableScroll/index.vue'
import { terminalColumns } from '@/views/monitor/fusion/vsualization/terminal/config/columns'
import { terminalOptions, trolleyOptions } from '@/views/monitor/fusion/vsualization/terminal/config/filters'
import { areaDetail } from '@/config/config'
// 以下3个为地图控件相关的组件
import mapControl from '@/components/map/index.vue'
import { store } from '@/components/map/mapStore'
import { image } from '@/assets/index'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { onMounted, ref, reactive, onBeforeMount, nextTick, computed, toRaw, onUnmounted } from 'vue'
import Ring from '@/components/echarts/ring.vue'
import Bar from '@/components/echarts/bar.vue'
import radioButtonGroup from '@/components/RadioButtonGroup/index.vue'
import { lang } from 'moment'
import { delData } from '@/api/construction/projectAchives'
import { last } from 'lodash'
import { User } from '@element-plus/icons-vue/dist/types'


const loading = ref(false)
const disabled = ref(false)
const eventData = ref([]) // 环形图数据
const sumTotal = ref('') // 环形图中间文字内容
const subTital = ref('') // 环形图中间子标题文字内容
const pieColors = ref([]) // 环形图各数据分段颜色，有几组数据就有几组颜色
const radioValue = ref() // 时间按钮值

const barData = ref([]) // 柱形图数据
const barAttr = ref([]) // 柱形图属性
const barColor = ref([]) // 柱形图颜色组
const barXData = ref([]) // 柱形图横轴数据
const ring = ref() // 对环形图的引用
const bar = ref() // 对柱形图的引用
const mapData = ref() //用于接收地图弹窗数据

const showAreaDialogVisible = ref(false)
const isterminalOptions = ref(terminalOptions)
const timer = ref()
const visible = ref(true)
// 用于保存机场层级
const layer = ref('全览')
// 用于保存选择的机场子层级
const subLayer = ref('F3')
// 用于保存机场子层级数组
const subLayers = ref([])
// 是否显示机场子层级
const hasSub = ref(false)
const title = ref('')
const mapLoadEvent = () => {
  drawAreaOnMaps()
}
// 请求用户的权限树
const { getters } = useStore()
const Users = computed(() => getters['user/getUserInfo'])
// 用户信息
const creator = ref({})
// 用于保存进港人数
const arrivalsNumber = ref()
// 用于保存出港人数
const departuresNumber = ref()
// 用于保存已完成数据
const finishNumber = ref()
// 用于保存分析中数据
const processNumber = ref()
// 用于保存未开始数据
const noStartNumber = ref()
// 用于保存安检通道开放数量
const infoNumber = ref()
// 用于保存登记口开放数量
const gateNumber = ref()
// 用于保存行李转盘开放数量
const beltNumber = ref()
// 用于保存机位占用数量
const seatNumber = ref()
const searchCondition = ref()
const thresholdData1 = ref([])
const pointsName = ref()
const points = ref([
  { x: 137256.9530350399, y: 40063.6462263813, name: '设施设备A01', type: '设备类型A', status: '正常', no: 'A01', dept: 'XX部门', content: 'xxxxxxx', lastTime: '2023-03-11', executor: '张三' }
])

const rules = reactive({
  name: [{ required: true, message: '请输入标注名称', trigger: 'blur' },
  { max: 20, message: '标注名称长度不能超过20', trigger: 'blur' }]
})

const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

/**
 * 编辑
 *
 */
const handleEdit = (data: any) => {
  showAreaDialog('编辑标注', data)
  points.value[0].x = data.lat
  points.value[0].y = data.lng
  showPoint(data)
}
const mapPoint = ref({})
/**
 * 删除
 *
 */
const handleDelete = async (row) => {
  if(row.organName != Users.value.organName){
    ElMessage.error('非本科室的数据不能删除！')
    return
  }
  await terminalDelete(row.id).then((res) => {
    ElMessage.success('刪除成功')
    getData()
  }).catch(res => {
    ElMessage.error(res.message || '刪除失败，请重试！')
  })
}

const showFloor = (val: string[]) => {
  if (val !== undefined) {
    subLayer.value = 'F3'
    subLayers.value = val
    hasSub.value = true
  } else {
    hasSub.value = false
    store.BNMap.switchDCJ('咸阳大场景')
  }
}

const submitvalue = ref(null) // 在函数外部定义submitvalue变量

const showAreaDialog = (val, data) => {
  timer.value = new Date().getTime()
  if (data) {
    //TOC用户可以查看其它科室标记
    if(data.organName != Users.value.organName){
      title.value = '查看标注'
    }else{
      title.value = '编辑标注'
    }

    nextTick(() => {
      submitvalue.value = {
        name: data.name,
        id: data.id,
        btsc: data.btsc,
        floor: data.floor,
        mender: {
          id: Users.value.userId,
          name: Users.value.userName,
          organId: Users.value.organId,
          organName: Users.value.organName
        },
        lat: data.lat,
        lng: data.lng
      }
    })
  } else {
    store.BNMap.bindEvent("lableLayer", "click", function (evt) {
      mapClick(evt, data)
    })
    submitvalue.value = {}
    console.log(mapPoint.value)
    if (mapPoint.value.x === undefined ) {
      ElMessage.warning('请在地图上点击需要标注记录的点位！')
    } else {
      // points.value[0].x = mapPoint.value.x
      // points.value[0].y = mapPoint.value.y
      // title.value = '新增标注'
      // showPoint(data)
    }
  }
}


// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref()

const Cancel = () => {
  //关闭弹窗
  store.BNWindows.hide()
  // console.log(clickLayer)
  clickLayer.visible = false
  //清除lableLayer图层
  lableLayer.visible = false

}

/**
 * 向api传参，进行条件查询
 * author：郑钦懋
 * date：2023/8/8
 */
const getDynamicData = async () => {
  await FlightResources().then((res) => {
    seatNumber.value = res.data.Seat
    infoNumber.value = res.data.Info
    gateNumber.value = res.data.Gate
    beltNumber.value = res.data.Belt
  })
  await selectFlight().then((res) => {
    finishNumber.value = res.data.finish
    processNumber.value = res.data.progress
    noStartNumber.value = res.data.noStart
  })
  // ********以下数据模拟来源于后端接口获取的数据************
  // 以下为环形图数据设置***数据实际字段根据接口结果进行调整
  eventData.value = [
    { value: noStartNumber.value, name: '未开始' },
    { value: processNumber.value, name: '执行中' },
    { value: finishNumber.value, name: '已完成' },
  ]
  // 计算总数量
  var sum = 0
  eventData.value.forEach(e => {
    sum += e.value
  })
  // 以下三个均为赋值操作
  sumTotal.value = sum + ''
  subTital.value = '保障任务总数'
  pieColors.value = ['#8D65F1', '#0284FE', '#88CF4B'] // 颜色组
  // 以下为柱形图数据设置***数据实际字段根据接口结果进行调整
  barAttr.value = ['name', 'data'] // 该值对应从接口获取的实际字段值
  barData.value = [infoNumber.value, gateNumber.value, beltNumber.value, seatNumber.value]
  barXData.value = ['安检通道开放数量', '登机口占用数量', '行李转盘开放数量', '机位占用数量']
  barColor.value = ['#4C8DF1']


  await selectarrival().then((res) => {
    arrivalsNumber.value = res.data
  })
  await selectdeparture().then((res) => {
    departuresNumber.value = res.data
  })
  ring.value.show()
  bar.value.show()
}

/**
 * 向api传参，重新对页面刷新
 * author：郑钦懋
 * date：2023/8/8
 */
const searchNo = ref({name: ""})

const getData = async () => {
  //非TOC用户只能查看自己科室的标记
  if(Users.value.organName != 'TOC'){
    searchNo.value.name = Users.value.organName
  }else{
    searchNo.value.name = ""
  }

  const payload: PageListType = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: searchNo.value
  }
  // 传递查询的内容到api
  await terminalPageList(payload).then((res) => {
    console.log(res, thresholdData1.value)
    // 当无法再获取数据或者数据量大于999条时，停止滚动
    if (thresholdData1.value.length >= 999) {
      disabled.value = true
    } else {
      thresholdData1.value = res.data.list
      disabled.value = false
    }
  })
  loading.value = false

}

/**
 * 弹窗保存功能
 * author：郑钦懋
 * date：2023/8/8
 * parms：FilterDataType
 * FilterDataType:弹窗中的数据
 */
const Submit = async () => {
  if (submitvalue.value) {
    if(mapData.value.replace(/\s+/g, '') === ''){
      ElMessage.error('点位名称不能为空！') 
      return
    }
    const filter = submitvalue.value
    if(title.value === '编辑标注' ){
      const newfilter = {
      id : filter.id,
      name : mapData.value.replace(/\s+/g, ''),
      btsc: filter.btsc,
      floor: filter.floor,
      mender: {
        id: filter.mender.id,
        name: filter.mender.name,
        organId: filter.mender.organId,
        organName: filter.mender.organName
      }
    }
      newfilter.lat = points.value[0].x
      newfilter.lng = points.value[0].y
      terminalUpdate(newfilter).then((res) => {
      ElMessage.success('编辑成功')
      store.BNWindows.hide()
      //清除lableLayer图层
      lableLayer.visible = false
      mapPoint.value = {}
      getData()
    }).catch(res => {
      ElMessage.error(res.message || '编辑失败，请重试！')
    })
    }else{
      const newfilter = {
      btsc: "航站楼",
      floor: "5",
      creator: {
        id: Users.value.userId,
        name: Users.value.userName,
        organId: Users.value.organId,
        organName: Users.value.organName
      }
    }
      newfilter.lat = points.value[0].x
      newfilter.lng = points.value[0].y
      newfilter.name = mapData.value.replace(/\s+/g, '')
      await terminalAdd(newfilter).then((res)=>{
        ElMessage.success('新增成功')
        store.BNWindows.hide()
        clickLayer.visible = false
        //清除lableLayer图层
        lableLayer.visible = false
        mapPoint.value = {}
        store.BNMap.bindEvent("lableLayer", "click", function (evt) {
          mapClick(evt, '')
        })
        getData()
      }).catch(res =>{
        ElMessage.error(res.message || '新增失败，请重试！')
      })
    }
  }

}

/**
 * 清空功能
 * author：郑钦懋
 * date：2023/8/8
 * parms：FilterDataType
 */
const reset = () => {
  pager.currentPage = 1 // 将pageNum设置为1
  getData()
}
const change = () => {
}


let t = setInterval(async () => {
  getData()
  getDynamicData()
}, 30000)

const scroll = () => {
  loading.value = true
  pager.pageSize += 10
  getData()
}

onUnmounted(()=>{
  clearInterval(t)
})

/**
 * 数据加载
 * author：靳从毅
 * date：2023/8/23
 */
// switchValue 切换图层按钮绑定值
const HandCart = ref(true)
const SecurityLane = ref(true)
const BoardingGate = ref(true)
const BaggageCarousel = ref(true)
const FlightValue = ref(true)
// 模拟区域图层切换加载区域
const switchArea = () => {
  clickLayer1.visible = HandCart.value
  clickLayer2.visible = SecurityLane.value
  clickLayer3.visible = BoardingGate.value
  clickLayer4.visible = BaggageCarousel.value
  clickLayer5.visible = FlightValue.value

}
const switchMap = (name: string) => {
  store.BNMap.switchDCJ(name, () => {
    // 一般为调用setCenter和setLevel方法
  })
}

//判断新增还是编辑画图
const showPoint = (data) => {
  if (title.value === "新增标注") {
    drawPoint(points.value)
  } else {
    points.value[0].x = data.lat
    points.value[0].y = data.lng
    pointsName.value = data.name
    drawPoint(points.value)
  }
}

/**
 * 新增编辑绘图
 * author：郑钦懋
 * date：2023/8/23
 */
var lableLayer = null
var star = "<span style='color:red'>*</span>"
const drawPoint = (points) => {
  store.BNMap.removeGraphicsLayer('lableLayer')
  // 向地图添加临时图层
  lableLayer = store.BNMap.creatGraphicsLayer({ id: 'lableLayer' })
  lableLayer.removeAll()
  points.forEach(p => {
    // 创建点
    const point = store.BNMap.createPoint({
      x: p.x,
      y: p.y,
      spatialReference: store.BNMap.spatialReference
    })
    // 创建图片
    const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 12, 14)
    const markerGraphic = store.BNMap.graphic(point, symbolStyle)
    lableLayer.add(markerGraphic)
    // 设置图层中心点为地图中心点
    store.BNMap.bindEvent("lableLayer", "click", function (evt) {
      store.BASE.move(lableLayer)
    })
    // store.BASE.move(lableLayer)
    store.BNMap.setCenter(points[0].x - 300, points[0].y)
    store.BNMap.addGraphicsLayer(lableLayer)
    //设置弹窗内容
    var html = "<div class='txtDiv' style='height: 60px; margin: 0 auto;  display: block; text-align: center;'></div>" +
      "<div class='btn' style='margin: 0 auto;  display: block; text-align: center;'></div>"
    //设置弹窗标题
    store.BNWindows.setTitle(title.value)
    //加载弹窗
    store.BNWindows.setContent(html);
    //通过class,外部样式添加input框和弹窗
    if(title.value === '编辑标注') {
      store.BASE.addHtml("txtDiv", star + "点位名称：<input type='text' class='txtPointName' value='" + pointsName.value.toString() + "' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    } else if(title.value === '查看标注'){
      store.BASE.addHtml("txtDiv", star + "点位名称：<input disabled type='text' class='txtPointName' value='" + pointsName.value.toString() + "' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    }else {
      store.BASE.addHtml("txtDiv", star + "点位名称：<input type='text' class='txtPointName' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    }

    if(title.value === '查看标注'){
      store.BASE.addHtml("btn", "<input type='button' class='btnRetuen' value='返回' style='padding: 5px 15px; margin-right: 10px; font-size: 14px; background-color: #fff; color: #000; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; outline: none;' />");
    }else{
      store.BASE.addHtml("btn", "<input type='button' class='btnRetuen' value='返回' style='padding: 5px 15px; margin-right: 10px; font-size: 14px; background-color: #fff; color: #000; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; outline: none;' /><input type='button' class='btnSave' value='保存' style='padding: 5px 15px; font-size: 14px; background-color: #409eff; color: #fff; border: none; border-radius: 5px; cursor: pointer; outline: none;'/>");
    }
    store.BASE.addKeyUpEvent("txtPointName")
    const txtPointName = ["txtPointName"]
    // const classs1 = ["txtPointName1"]
    store.BASE.getValue("btnSave", txtPointName, "save")
    store.BASE.getValue("btnRetuen", txtPointName, "returnEvt")
    store.BASE.getValue("esri-popup__button",txtPointName,"returnEvt")
    //设置弹窗大小
    store.BNWindows.resize(100, 200)
    //设置弹窗展示的位置
    store.BNWindows.show(point);
  })
}
window["save"] = (val) => {
  save(val);
};
window["returnEvt"] = (val1) => {
  returnEvt(val1);
};
window["inputMsg"] = (msg) => {
  ElMessage.error(msg)
};
//弹窗中保存按钮
const save = (val) => {
  if(val.length > 0){
    var lastValue = val[val.length - 1].toString();
    mapData.value = lastValue
    //传递input中内容
    Submit()
  }
  // if (val.length - 1 !== 0) {
  //   var lastValue = val[val.length - 1].toString();
  //   mapData.value = lastValue
  //   //传递input中内容
  //   Submit()
  // } else {
  //   ElMessage.error("点位名称不能为空！")
  // }
}

//弹窗中返回按钮
const returnEvt = (val1) => {
  //关闭弹窗
  store.BNWindows.hide()
  if (clickLayer != undefined) {
    clickLayer.visible = false
  }
  //清除lableLayer图层
  lableLayer.visible = false
  mapPoint.value = {}
  store.BNMap.bindEvent("lableLayer", "click", function (evt) {
    mapClick(evt, '')
  })
}

// 该方法用于接受Map.html传过来的方法回调并调用本页面的方法用来获得绘制的坐标
window["bnSketchComplete"] = (rings) => {
  store.BNMap.bindEvent("lableLayer", "click", function (evt) {
    store.BASE.move(lableLayer)
  })
  if (points.value[0].x !== rings[0] || points.value[1].y !== rings[1]) {
    bnSketchComplete(rings);
    points.value[0].x = rings[0]
    points.value[0].y = rings[1]
    const pointss = { x: points.value[0].x, y: points.value[0].y, spatialReference: store.BNMap.spatialReference }
    //弹窗内容如上
    var html = "<div class='txtDiv' style='height: 100px; margin: 0 auto;  display: block; text-align: center;'></div>" +
      "<div class='btn' style='margin: 0 auto;  display: block; text-align: center;'></div>"
    store.BNWindows.setTitle(title.value+'   (点位移动过后请点击一下地图)')
    store.BNWindows.setContent(html);
    if(title.value === '编辑标注'){
      store.BASE.addHtml("txtDiv", star + "点位名称：<input type='text' class='txtPointName' value='" + pointsName.value.toString() + "' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    }else if(title.value === '查看标注'){
      store.BASE.addHtml("txtDiv", star + "点位名称：<input disabled type='text' class='txtPointName' value='" + pointsName.value.toString() + "' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    }else{
      store.BASE.addHtml("txtDiv", star + "点位名称：<input type='text' class='txtPointName' placeholder='请输入点位名称' style='height: 30px; border: 1px solid #ccc; border-radius: 5px;' onfocus=\"this.style.borderColor = '#00a8e8';\" onblur=\"this.style.borderColor = '#ccc';\"/>");
    }

    if(title.value === '查看标注'){
      store.BASE.addHtml("btn", "<input type='button' class='btnRetuen' value='返回' style='padding: 5px 15px; margin-right: 10px; font-size: 14px; background-color: #fff; color: #000; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; outline: none;' />");
    }else{
      store.BASE.addHtml("btn", "<input type='button' class='btnRetuen' value='返回' style='padding: 5px 15px; margin-right: 10px; font-size: 14px; background-color: #fff; color: #000; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; outline: none;' /><input type='button' class='btnSave' value='保存' style='padding: 5px 15px; font-size: 14px; background-color: #409eff; color: #fff; border: none; border-radius: 5px; cursor: pointer; outline: none;'/>");
    }
    store.BASE.addKeyUpEvent("txtPointName")
    const txtPointName = ["txtPointName"]
    store.BASE.getValue("btnSave", txtPointName, "save")
    store.BASE.getValue("btnRetuen", txtPointName, "returnEvt")
    store.BNWindows.resize(100, 200)
    store.BNWindows.show(pointss);
  }
};

// 用来输出画图后对应的坐标点集合,参数值来自于Map.html
function bnSketchComplete(rings) {
  // 自行添加坐标值的处理代码
  console.log(rings);
}

let clickLayer1;
let clickLayer2;
let clickLayer3;
let clickLayer4;
let clickLayer5;

//图层上绘点
const createAndAddGraphicsLayer = (id, color, points) => {
  const clickLayers = store.BNMap.creatGraphicsLayer({ id });
  const markerSymbol = {
    type: "simple-marker",
    color
  };
  points.forEach(point => {
    const graphic = store.BNMap.graphic(store.BNMap.createPoint(point), markerSymbol);
    clickLayers.add(graphic);
  });
  store.BNMap.addGraphicsLayer(clickLayers);
  return clickLayers;
};

//点坐标，颜色，图层137036.96187727724,40769.12356856383
const drawAreaOnMaps = () => {
  const points1 = [
    { x: 136791.82090360468, y: 40363.28703360155, spatialReference: store.BNMap.spatialReference },
    { x: 136794.99499560852, y: 40814.45252465491, spatialReference: store.BNMap.spatialReference }
  ];
  clickLayer1 = createAndAddGraphicsLayer('clickLayer1', [250, 205, 145], points1);

  const points2 = [
    { x: 137135.99606133587, y: 40822.30933966826, spatialReference: store.BNMap.spatialReference },
    { x: 137135.99606133587, y: 40722.30933966826, spatialReference: store.BNMap.spatialReference },
    { x: 137135.99606133587, y: 40622.30933966826, spatialReference: store.BNMap.spatialReference },
    { x: 137135.99606133587, y: 40532.30933966826, spatialReference: store.BNMap.spatialReference },
    { x: 137135.99606133587, y: 40432.30933966826, spatialReference: store.BNMap.spatialReference },
    { x: 137135.99606133587, y: 40332.30933966826, spatialReference: store.BNMap.spatialReference },
  ];
  clickLayer2 = createAndAddGraphicsLayer('clickLayer2', [255, 255, 128], points2);
  const points3 = [
    { x: 136796.597114288, y: 40320.96095968077, spatialReference: store.BNMap.spatialReference },
    { x: 136709.54901545067, y: 40320.96095968077, spatialReference: store.BNMap.spatialReference },
    { x: 136627.17390607038, y: 40320.96095968077, spatialReference: store.BNMap.spatialReference },
    { x: 136580.21027047635, y: 40320.96095968077, spatialReference: store.BNMap.spatialReference },
    { x: 136495.1262973078, y: 40320.96095968077, spatialReference: store.BNMap.spatialReference },
    { x: 136465.75749664468, y: 40327.086159785395, spatialReference: store.BNMap.spatialReference },
    { x: 136805.3283817509, y: 40368.58607107984, spatialReference: store.BNMap.spatialReference },
    { x: 136754.26369628822, y: 40368.58607107984, spatialReference: store.BNMap.spatialReference },
    { x: 136661.28401410152, y: 40368.58607107984, spatialReference: store.BNMap.spatialReference },
    { x: 136589.71408736898, y: 40368.58607107984, spatialReference: store.BNMap.spatialReference },
    { x: 136517.7203982745, y: 40368.58607107984, spatialReference: store.BNMap.spatialReference },
  ];
  clickLayer3 = createAndAddGraphicsLayer('clickLayer3', "#EC808D", points3);

  const points4 = [
    { x: 137041.05790698982, y: 40409.639215028285, spatialReference: store.BNMap.spatialReference },
    { x: 137041.05790698982, y: 40769.12356856383, spatialReference: store.BNMap.spatialReference },
  ];
  clickLayer4 = createAndAddGraphicsLayer('clickLayer4', '#CAF982', points4);

  const points5 = [
    { x: 136767.21360930122, y: 40580.17083809154, spatialReference: store.BNMap.spatialReference },
  ];
  clickLayer5 = createAndAddGraphicsLayer('clickLayer5', '#81D3F8', points5);
};
let clickLayer
const mapClick = (evt: any, data:any) => {
  // 移除临时图层
  store.BNMap.removeGraphicsLayer('clickLayer')
  // 向地图添加临时图层
  clickLayer = store.BNMap.creatGraphicsLayer({ id: 'clickLayer' })
  clickLayer.removeAll()
  // 创建点
  const point = store.BNMap.createPoint({
    x: evt.mapPoint.x,
    y: evt.mapPoint.y,
    spatialReference: evt.mapPoint.spatialReference
  })
  store.BNMap.setCenter(point)
  // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 12, 14)
  // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle)
  // 添加到地图
  clickLayer.add(picgraphic)
  store.BNMap.addGraphicsLayer(clickLayer)
  // 将相关信息保存到变量
  mapPoint.value.x = evt.mapPoint.x
  mapPoint.value.y = evt.mapPoint.y
  points.value[0].x = mapPoint.value.x
  points.value[0].y = mapPoint.value.y
  title.value = '新增标注'
  showPoint(data)
}

/**
 * 数据加载
 * author：郑钦懋
 * date：2023/8/8
 */
onMounted(async () => {
  await nextTick() // 确保DOM已经更新
  // 这里可以继续执行你的其他逻辑
  getData()
  getDynamicData()
  change()
})

</script>

<style lang="less" scoped>
.dialog {
  pointer-events: none;
}
.dialog /deep/ .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 980px;
  top: 250px;
}

/* 进入动画 */
.hello-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}
.hello-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}
@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translate(0);
  }
}
.drawer {
  width: 400px;
  height: 500px;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}
.drawer>.title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;
  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2f7df1 1px solid;
    text-indent: 1em;
  }
  .newArea {
    // float: right;
    margin-left: 10px;
  }
}
.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}
.drawer>.content {
  line-height: 32px;
  height: 100px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  position: relative;
  /deep/ .el-form-item__label {
    text-align: left;
    width: 85px !important;
    padding: 0;
    display: inline-block;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
  /deep/ .filter-wrapper {
    display: inline-block;
  }
  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 73px;
    left: 187px;
  }
}
.msgList {
  padding: 10px 0 10px 10px;
  overflow-y: scroll;
  height: 580px;
}
.msgList::-webkit-scrollbar {
  display: none;
}
.listDiv {
  border: #d7d7d7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;
  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }
  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
  .top span img {
    margin-top: 2px;
  }
  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }
  .top span:last-child {
    float: right;
    text-align: right;
  }
  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }
  .list::-webkit-scrollbar {
    display: none;
  }
}
.subLayer {
  // position: absolute;
  // width: 35px;
  // top: 620px;
  // border: 0;
  position: absolute;
  width: 35px;
  top: calc(65vh - 10px);
  right: 230px;
  border: 0;
}
.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}
.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}
.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}
.mapLegend {
  padding: 10px;
  background: #FFF;
  border-radius: 8px;
  position: absolute;
  width: 180px;
  height: 160px;
  top: 650px;
  right: 10px;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;
  .sw {
    margin-top: 5px;
    margin-left: 30px;
  }
  div {
    // margin-bottom: 8px;
    line-height: 30px;
    .legend {
      float: left;
      border-radius: 4px;
      width: 10px;
      height: 10px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2F7DF1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}
.mapLegend_b {
  right: 10px;
  top: calc(70vh - 22px);
}
.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
  object-fit: none;
}
.btn_d {
  animation: move 0s reverse;
  right: 230px;
  top: calc(86vh - 24px);
}
.btn_c {
  animation: move 0s reverse;
  right: 100px;
}
.btn_b {
  left: 0;
}
.btn_a {
  left: 410px;
}
.search {
  position: absolute;
  top: 6px;
  left: 410px;
  border: 0;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 200px;
}
.searchicon {
  position: absolute;
  top: 6px;
  left: 600px;
  border: 0;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 20px;
}
.pieStyle {
  top: -80px;
  width: 400px;
  height: 320px;
  background-color: #FFF;
  border-radius: 8px;
}
.barStyle {
  right: 5px;
  position: absolute;
  width: 500px;
  height: 200px;
  background-color: #FFF;
  border-radius: 8px;
  margin: 5px;
  top: 0;
}
</style>
